<template>
  <n-layout class="h-full m-h-full">
    <n-layout-header class="h-20 p-4 lg:px-10 sm:px-5">
      <n-space align="center" class="h-full" justify="space-between">
        <img alt="header-logo" class="img-btn" height="26" :src="`${currentPageImagePath}/header-logo.svg`"
             width="173" @click="$router.push('/')"/>
        <n-space :size="0" align="center" class="w-64" justify="space-between">
          <img alt="home_icon_layers" class="img-btn" :src="`${currentPageImagePath}/home_icon_layers.svg`"/>
          <img alt="home_icon_guide" class="img-btn" :src="`${currentPageImagePath}/home_icon_guide.svg`"/>
          <img alt="home_icon_account" class="img-btn" :src="`${currentPageImagePath}/home_icon_account.svg`"/>
          <n-divider class="m-0" vertical/>
          <img alt="home_icon_poweroff" class="img-btn" :src="`${currentPageImagePath}/home_icon_poweroff.svg`"
               title="退出登录" @click="userStore.logout()"/>
        </n-space>
      </n-space>
    </n-layout-header>
    <n-layout class="top-20" has-sider position="absolute">
      <n-layout-sider :collapsed-width="64" :native-scrollbar="false" :width="260" collapse-mode="width" show-trigger>
        <n-menu :collapsed-icon-size="24" :collapsed-width="64" :indent="40" :options="menuOptions" :value="$route.name"
                class="pt-1.5 border-t" @update:value="switchMenu"/>
      </n-layout-sider>
      <n-layout :native-scrollbar="false">
        <n-layout-content class="bg-[#F7F7F7] p-4">
          <router-view/>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </n-layout>
</template>

<script setup>
import {h, ref} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {menuRoutes} from '@/router/modules'
import {useUserStore} from '@/store'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const currentPageImagePath = '/images/backstage-images/center-images'
console.log(route)
const renderMenu = list => {
  const renderIcon = img => {
    return () => h('img', {src: `${currentPageImagePath}/${img}.svg`, alt: img, class: 'brightness-0'})
  }
  const handleField = (item, icon) => {
    return {
      label: item.meta.title,
      key: item.name,
      icon: icon && renderIcon(icon),
      children: item.meta.renderChildren && item.children.length > 0 ? renderMenu(item.children) : undefined
    }
  }
  return list.map(item => handleField(item, item.meta.icon))
}
// 侧边菜单栏
const menuOptions = ref(renderMenu(menuRoutes[0].children))

const switchMenu = key => router.push({name: key})
</script>

<style lang="less" scoped>
.n-menu {
  &:deep(.n-menu-item), &:deep(.n-submenu) {
    .n-menu-item-content {
      user-select: none;

      &:before, &:after {
        right: 0;
      }

      &:after {
        content: '';
        width: 4px;
        height: 100%;
        background-color: transparent;
        position: absolute;
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
      }
    }

    .n-menu-item-content.n-menu-item-content--selected {
      &:before {
        background: linear-gradient(270deg, #EBEFFE 0%, #FFFFFF 100%);
        border-radius: 2px;
      }

      &:after {
        background-color: var(--n-item-text-color-active);
      }
    }

    .n-menu-item-content--selected,
    .n-menu-item-content--child-active {
      .n-menu-item-content__icon {
        img {
          filter: brightness(100%) !important;
        }
      }
    }
  }
}
</style>
